<template>
  <div>
    <h2>APPIndex</h2>
    <div class="choose">
      <ol type="1" start="1">
        <li><a href="javascript:;" @click="handleClick('componentA')">选择器--默认</a></li>
        <li><a href="javascript:;" @click="handleClick('componentB')">选择器--日期</a></li>
      </ol>
    </div>
    <div>
      <b>{{ currentView }}</b>
      <component :is="currentView"></component>
    </div>
  </div>
</template>
<script>
  import componentA from './selectors/ComponentA'
  import componentB from './selectors/ComponentB'
  export default {
    name: 'appIndex',
    components: {
      componentA,
      componentB

    },
    data() {
      return {
        currentView: 'componentA'
      }
    },
    methods: {
      handleClick(val) {
        this.currentView = val
      }
    },
  }
</script>
<style>
  html {
    font-size: 62.5%;
    height: 100%;
    position: relative;
  }
  ul,ol {
    padding-left: 1rem;
  }
  li {
    text-align: left;
    font-size: 1.5rem;
  }
  a {
    text-decoration: none;
  }
  .choose {
    margin: 1rem 0;
  }
  .choose ol {
    display: inline-block;
  }
</style>
